<template>
  <div class="container">
    <div class="center">
      <div class="left">
        <div class="top">
          <h1 class="title">
            <span class="subtitle">Safety Equipment Supplier</span>
            <span class="ad">With Over 10 Years of <br />OEM Experience</span>
          </h1>
        </div>
        <p>
          One of the leading manufacturers and suppliers of safety equipment in
          China since 2008. As a professional China PPE supplier, we can supply
          safety shoes, work boots, coveralls, FR coveralls, helmets, glasses,
          safety gloves, and safety masks.
        </p>
        <button>Get a Quote now -></button>
      </div>
      <div class="right">
        <img src="@/assets/images/home1.png" alt="" />
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.container {
  width: 100%;
  height: 433.99px;
  padding: 80px 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .center {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .left {
      width: 607px;
      height: 393.99px;

      .top {
        width: 607px;
        height: 184px;
        margin-bottom: 20px;

        .title {
          width: 607px;
          height: 124px;
          margin: 10px 0;
          font-size: 24px;
          font-weight: bold;
          color: black;
          font-size: 49px;
          line-height: 1.2; /* 调整行高，避免换行后文字拥挤 */

          // 关键1：让 subtitle 强制单行显示（不自动换行）
          .subtitle {
            color: #0e74bc;
            display: block; /* 作为块级元素单独占一行 */
            white-space: nowrap; /* 强制不换行 */
            margin-bottom: 10px; /* 与下方 ad 保持间距 */
          }

          // 关键2：ad 继承标题样式，确保换行后排版一致
          .ad {
            display: block; /* 作为块级元素，承接换行 */
          }
        }
      }

      p {
        margin-bottom: 20px;
        color: #444444;
        font-size: 16px;
      }
      button{
        padding: 11px 30px;
        background: #0e74bc;
        color: white;
        animation: bounce 1s infinite; 
      }
      button:hover{
            background: #0c65a0;
        }
    }

    .right {
      width: 492.49px;
      height: 393.99px;
      padding: 10px;
    }
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* 初始和结束位置（不偏移） */
  }
  50% {
    transform: translateY(-5px); /* 中间位置（向上跳5px） */
  }
}
</style>